<?xml version="1.0"?>
<jsp:root 	xmlns:jsp="http://java.sun.com/JSP/Page"
			xmlns:sql="http://java.sun.com/jsp/jstl/sql"
			xmlns:c="http://java.sun.com/jsp/jstl/core" 
			version="2.1">
	<jsp:directive.page contentType="text/html; charset=UTF-8" />
	<jsp:directive.page isELIgnored="false" />
	<jsp:output omit-xml-declaration="false"
		doctype-root-element="html"
		doctype-public="-//W3C//DTD XHTML 1.1//EN"
		doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd" /> 	
	<jsp:directive.page import="es.albarregas.modelo.ModelFacade"/>
	<jsp:directive.page import="es.albarregas.modelo.User" />
	
	
		
	<jsp:useBean id="userBean" class="es.albarregas.beans.UserBean" scope="session" />	<!-- Para el logout de administrador -->
	
	<jsp:useBean id="catList" class="es.albarregas.beans.CategoriaListBean" scope="session" />
	
	<jsp:useBean id="catForm" class="es.albarregas.beans.CategoriaBean" scope="page" />
	
    
 	

<html>
<head>
  	<title>Ikex Administración | Categorías</title>
  	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<!-- Apple iOS and Android stuff -->
	<meta name="apple-mobile-web-app-capable" content="no"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
	<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"/>
	<!-- Apple iOS and Android stuff - don't remove! -->
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1"/>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/admin/style.css"></link>
	
	<link rel="shortcut icon" href="${pageContext.request.contextPath}/images/favicon.png" ></link>
	
			
	<script src="${pageContext.request.contextPath}/js/jquery.min.js"  ><jsp:text></jsp:text></script>
	<script type="text/javascript" language="javascript" src="${pageContext.request.contextPath}/js/jquery.dataTables.js"><jsp:text></jsp:text></script>
	<script type="text/javascript" charset="utf-8">
			$(document).ready(function() {
				$('#example').dataTable();
			} );
			
		</script>
	<!-- Librería JQuery para validación de formularios -->
    <script src="${pageContext.request.contextPath}/js/jquery-validate.js"><jsp:text /></script>
	
	<link href="${pageContext.request.contextPath}/css/admin/icofont.css" type="text/css" rel="stylesheet" />
	<link href="${pageContext.request.contextPath}/css/admin/default.css" type="text/css" rel="stylesheet" />
	<link href="${pageContext.request.contextPath}/css/admin/datatables.css" type="text/css" rel="stylesheet" />
			
			
			
	<link href="${pageContext.request.contextPath}/css/admin/fonts.css" type="text/css" rel="stylesheet" />
	<link href="${pageContext.request.contextPath}/css/admin/ie9.css" type="text/css" rel="stylesheet" />
	<link href="${pageContext.request.contextPath}/css/admin/style.css" type="text/css" rel="stylesheet" />
	<link href="${pageContext.request.contextPath}/css/admin/flags.css" type="text/css" rel="stylesheet" />
	<script src="${pageContext.request.contextPath}/js/admin/newStyle.js" data-wr-resname="ClearStyle-script"><jsp:text /></script>
	
</head>
<body>

	<jsp:setProperty name="catForm" property="oid" param="currentOid"/>
	<jsp:setProperty name="catForm" property="nombre" param="currentName"/>


	<div id="wrapper">		
		<aside class="sidebar sidebarSx">
			<header>
				<div id="logo">
					<a href="${pageContext.request.contextPath}/admin/index.jsp"><img src="${pageContext.request.contextPath}/images/logo-ikex.png" alt="Logo Ikex" height="48" /></a>
				</div>
			</header>
			<div>Bienvenido ${userBean.username } | <a href="${pageContext.request.contextPath}/logout" role="button" data-toggle="modal">Logout</a></div>
			<nav>
				<ul class="menu">
					<li class=""><a class="" href="${pageContext.request.contextPath}/admin/index.jsp">Inicio</a></li>
					<li class=""><a class="" href="${pageContext.request.contextPath}/admin/users.jsp">Usuarios</a></li>
					<li><a class="" href="${pageContext.request.contextPath}/admin/products.jsp">Productos</a></li>
					<li class="current"><a class="" href="${pageContext.request.contextPath}/admin/categories.jsp">Categorías</a></li>
					<li class=" "><a class="" href="${pageContext.request.contextPath}/admin/brands.jsp">Marcas</a></li>
				</ul>
			</nav>
		</aside>	
		
		<!-- Page content -->
		<div id="content" style=""> <!-- Para mostrar mensajes de error o de operación exitosa -->
			<c:if test="${listaResultados != null }">
				<ul class="resultados-list">
				<c:forEach items="${listaResultados}" var="current">
					<li><c:out value="${current }"></c:out></li>
				</c:forEach>
				</ul>
			</c:if>
			<nav>
				<ul class="breadcrumb">
					<li><a href="${pageContext.request.contextPath}/admin/index.jsp">Inicio</a></li>
					<li><a class="active" href="#">Categorías</a></li>
				</ul>
			</nav>
			<section id="top">
			</section>
			<header>
				<div class="pageTitle"><h1>Categorías</h1></div>
			</header>
			
			<section>
				<div class="container_12">
					<div class="grid_12 alpha omega agrd_24">
						<section class="frame" data-collapsible="false" id="lista-de-categorias" >
							<header>
								<h3>Lista de categorías</h3>
							</header>
							<div class="plain">
							<c:choose>
							<c:when test="${catList.category.size() > 0 }"> <!-- Si contiene elementos, construyo la tabla -->
								<div class="plain PowerIndexUnit">
									<table id="example">
									<!-- begin header -->
										<thead>
											<tr>
												<th class=" header" data-information-level="none">Oid</th>
										        <th class=" header" data-information-level="none">Nombre</th>
										        <th class=" header" data-information-level="none">Nº Productos</th>
												<th class=" header" data-information-level="none"><jsp:text /></th>
												<th class=" header" data-information-level="none"><jsp:text /></th>
											</tr>
										<!-- end header -->
										</thead>
										<tbody id="categoriesTable">
										<!-- instances -->
											<c:forEach var="categoria" items="${catList.category}" varStatus="loopStatus">
												<tr class="${loopStatus.index % 2 == 0 ? 'rowAlternate' : 'row'}"> <!-- uso la vble loopStatus para alternar el estilo de las filas -->
													<td data-information-level="none" class=" value integer">${categoria.oid}</td>
													<td data-information-level="none" class=" value string">${categoria.nombre}</td>
													<td data-information-level="none" class=" value string">${categoria.nProductos}</td>
													
													<c:url var="modifyLink" value="/admin/categories.jsp"> <!-- añado a la url los parámetros del registro elegido para modificar -->
														<c:param name="currentOid" value="${categoria.oid}"/>
														<c:param name="currentName" value="${categoria.nombre}"/>
													</c:url>
													<td class="command-column">
														<a href="${modifyLink}">
															<img src="${pageContext.request.contextPath}/images/admin/edit.png" alt="Editar categoría" title="Editar" class="command-button" />
														</a>
													</td>
													<c:url var="deleteLink" value="/delete-category">
														<c:param name="catOid" value="${categoria.oid}"/>
													</c:url>
													<td class="command-column">
														<a href="${deleteLink}" class="edit-command-button confirmation"  >
															<img src="${pageContext.request.contextPath}/images/admin/delete.png" alt="Eliminar categoría" title="Eliminar" class="command-button" />
														</a>
													</td>
 												</tr>
											</c:forEach>	
										</tbody>
									</table>
								</div> <!-- powerindexunit -->
								
								</c:when>
								</c:choose>
							</div>
						</section>
					</div>
				</div>
			
			</section>
			
			<!-- ****************************************** -->
			<br></br><br></br>
			
			<div class="grid_12 alpha omega agrd_24">
<section class="frame separate" data-collapsible="false" id="categoria">
	<header>
		<h3>Categoría</h3>
	</header>
	<div>
	  <div class="plain ">
		  <div class="plain EntryUnit">
		  	<form method="post" action="${pageContext.request.contextPath}/add-category" id="categoryForm">
			<fieldset class=" vertical">   
				<input type="hidden" name="inputOid" size="25" value="${catForm.oid }" id="inputOid" class="wr-submitButtons:ln10  field text" />
	             <div class="field text" >
					<label for="inputName">Nombre de categoría</label>
		             <div class="">
						<input type="text" name="inputName" size="25" value="${catForm.nombre }" id="inputName" class="wr-submitButtons:ln10  field text" />
	             	 </div> 
	             </div>		    	
		    	 <div class="clear"></div>	
			     <div class="clear"></div>	
		   	</fieldset>
		      <div class="buttons">
			  	<button title="Guardar" class="button  button alta"  id="button:ln10" name="button:ln10" type="submit" value="Alta">Guardar categoría</button>
		      </div>
			  <div class="clear"></div>
			  </form>
			  </div>
		  </div>
	</div>
</section>
			</div>
				<div class="clear">&#160;&#160;</div>

	<jsp:setProperty name="catForm" property="nombre" param="inputName"/>
			
			
			
			<!-- ****************************************** -->
			
		</div> <!-- content -->	
			
	</div> <!-- wrapper -->




</body>
</html>

<script type="text/javascript">
	var contextPath="${pageContext.request.contextPath}";
	console.log(contextPath);
</script>
<script type="text/javascript">
    $('.confirmation').on('click', function () {
        return confirm('¿Estás seguro?');
    });
</script>

<script src="${pageContext.request.contextPath}/js/admin/validacion.js"><jsp:text /></script>  
</jsp:root>